<!--<template>-->
<!--    <div>-->
<!--        &lt;!&ndash; 标题&ndash;&gt;-->
<!--        <div class="header-container">-->
<!--            <a-page-header title="审核加入" />-->

<!--        </div>-->

<!--        &lt;!&ndash; 两个按钮&ndash;&gt;-->
<!--        <div class="query-container">-->
<!--            <a-button type="primary" :disabled="!hasSelected" @click="onBatchOperation(2)">批量通过</a-button>-->
<!--            <span class="seize"/>-->
<!--            <a-button type="danger" :disabled="!hasSelected" @click="onBatchOperation(3)">批量驳回</a-button>-->
<!--            <span class="seize"/>-->
<!--            <span v-if="hasSelected">-->
<!--                {{ `已选中 ${selectedRowKeys.length} 项` }}-->
<!--            </span>-->
<!--        </div>-->

<!--        &lt;!&ndash; 表格&ndash;&gt;-->
<!--        <div class="table-container">-->
<!--            <a-table-->
<!--                    :row-selection="rowSelection"-->
<!--                    :columns="columns"-->
<!--                    :data-source="dataResource"-->
<!--                    :pagination="false"-->
<!--            >-->
<!--                <template slot="operation" slot-scope="text,record">-->
<!--                    &lt;!&ndash; 点击通过弹出的确认框&ndash;&gt;-->
<!--                    <a-popconfirm-->
<!--                            v-if="dataResource.length"-->
<!--                            title="你确定要通过这个申请吗?"-->
<!--                            @confirm="() => onOperation(record.key,2)"-->
<!--                            cancelText='取消'-->
<!--                            okText="确定"-->
<!--                            :disabled="onDisabled(record)"-->
<!--                            placement="bottom"-->
<!--                    >-->
<!--                        <a-icon slot="icon" type="question-circle-o" style="color: red"/>-->
<!--                        <a href="javascript:;" :style="onColor(record,'通过')">通过</a>-->
<!--                    </a-popconfirm>-->
<!--                    <span class="seize"/>-->

<!--                    &lt;!&ndash; 点击驳回弹出的确认框&ndash;&gt;-->
<!--                    <a-popconfirm-->
<!--                            v-if="dataResource.length"-->
<!--                            title="你确定要驳回这个申请吗?"-->
<!--                            @confirm="() => onOperation(record.key,3)"-->
<!--                            cancelText='取消'-->
<!--                            okText="确定"-->
<!--                            :disabled="onDisabled(record)"-->
<!--                            placement="bottom"-->
<!--                    >-->
<!--                        <a-icon slot="icon" type="question-circle-o" style="color: red"/>-->
<!--                        <a href="javascript:;" :style="onColor(record,'驳回')">驳回</a>-->
<!--                    </a-popconfirm>-->
<!--                    <span class="seize"/>-->
<!--                    <a href="javascript:;" @click="onCheck(record.teacherId,record.courseGroupId)">查看</a>-->
<!--                </template>-->
<!--            </a-table>-->
<!--            &lt;!&ndash; 点击查看弹出的对话框&ndash;&gt;-->
<!--            <a-modal-->
<!--                    title="老师和课程组信息"-->
<!--                    :visible="visible"-->
<!--                    :destroyOnClose="true"-->
<!--                    @ok="handleOk"-->
<!--                    @cancel="handleCancel"-->
<!--            >-->
<!--                <div class="modal-container">-->
<!--                    <a-divider orientation="left">-->
<!--                        <p>老师信息</p>-->
<!--                    </a-divider>-->
<!--                    <a-row :gutter="['24','24']">-->
<!--                        <a-col :span="12">-->
<!--                            工号：{{teacherRecord.account}}-->
<!--                        </a-col>-->
<!--                        <a-col :span="12">-->
<!--                            密码：{{teacherRecord.password}}-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                    <a-row :gutter="['24','24']">-->
<!--                        <a-col :span="12">-->
<!--                            姓名：{{teacherRecord.name}}-->
<!--                        </a-col>-->
<!--                        <a-col :span="12">-->
<!--                            邮箱：{{teacherRecord.e_mail}}-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                    <a-row :gutter="['24','24']">-->
<!--                        <a-col :span="12">-->
<!--                            学院：{{teacherRecord.college}}-->
<!--                        </a-col>-->
<!--                        <a-col :span="12">-->
<!--                            电话号码：{{teacherRecord.phone}}-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                    <a-divider orientation="left">-->
<!--                        <p>课程组信息</p>-->
<!--                    </a-divider>-->
<!--                    <a-row :gutter="['24','24']">-->
<!--                        <a-col :span="12">-->
<!--                            课程组名：{{courseGroupDetailInfo.courseGroupName}}-->
<!--                        </a-col>-->
<!--                        <a-col :span="12">-->
<!--                            所属课程：{{courseGroupDetailInfo.simpleCourseGroupInfo.course}}-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                    <a-row :gutter="['24','24']">-->
<!--                        <a-col :span="12">-->
<!--                            开课时间：{{courseGroupDetailInfo.simpleCourseGroupInfo.courseGroupTime}}-->
<!--                        </a-col>-->
<!--                        <a-col :span="12">-->
<!--                            课程组长：{{courseGroupDetailInfo.courseGroupLeader.teacherNumber===null ? '':-->
<!--                            courseGroupDetailInfo.courseGroupLeader.teacherNumber+":"+courseGroupDetailInfo.courseGroupLeader.teacherName}}-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                    <div style="margin-top: 2em">上课老师：</div>-->
<!--                    <a-tag v-for="i in courseGroupDetailInfo.simpleCourseGroupInfo.teachers" :key="i.teacherId" style="margin-top: 1em">-->
<!--                        {{i.teacherNumber+":"+i.teacherName}}-->
<!--                    </a-tag>-->

<!--                    <div style="margin-top: 2em">上课班级：</div>-->
<!--                    <a-tag v-for="i in courseGroupDetailInfo.simpleCourseGroupInfo.classes" :key="i.classId" style="margin-top: 1em">-->
<!--                        {{i.className}}-->
<!--                    </a-tag>-->

<!--                </div>-->
<!--            </a-modal>-->
<!--        </div>-->
<!--    </div>-->
<!--</template>-->

<!--<script>-->
<!--    //列名数组-->
<!--    const columns = [-->
<!--        {-->
<!--            title: '审核内容',-->
<!--            dataIndex: 'content',-->
<!--            align: 'center',-->
<!--        },-->
<!--        {-->
<!--            title: '审核结果',-->
<!--            dataIndex: 'result',-->
<!--            align: 'center',-->

<!--        },-->
<!--        {-->
<!--            title: '操作',-->
<!--            dataIndex: 'operation',-->
<!--            scopedSlots: { customRender: 'operation' },-->
<!--            align: 'center',-->
<!--        }-->
<!--    ];-->

<!--    import { mapState } from 'vuex'-->
<!--    export default {-->
<!--        name: "AuditJoin",-->
<!--        data(){-->
<!--            return{-->
<!--                //表格数据源-->
<!--                dataResource:[],-->
<!--                columns,-->
<!--                //表格分页数据源和事件监听-->
<!--                pagination: {-->
<!--                    //current和pageSize负责记录操作时在第几页和显示几条数据-->
<!--                    current:1,-->
<!--                    pageSize:10,-->
<!--                    //可选择的pageSize-->
<!--                    pageSizeOptions: ['5', '10', '15', '20'],-->
<!--                    //数据总数-->
<!--                    total:0,-->
<!--                    //默认的pageSize-->
<!--                    defaultPageSize:10,-->
<!--                    //数据总数如何显示-->
<!--                    showTotal: total=>'总共'+total+'条审核信息',-->
<!--                    //是否在分页中显示pageSize能否改变的选项-->
<!--                    showSizeChanger: true,-->
<!--                    //current 和 pageSize 改变时触发的事件-->
<!--                    onShowSizeChange: (current, pageSize) => this.onChangePage(current, pageSize),-->
<!--                    onChange: (page,pageSize)=> this.onChangePage(page,pageSize)-->
<!--                },-->
<!--                //选中多项的数据源-->
<!--                selectedRowKeys: [],-->
<!--                //是否加载-->
<!--                loading: true,-->
<!--                //默认分页数据-->
<!--                defaultCurrentPage: 1,-->
<!--                defaultRows: 10,-->
<!--                //弹出框是否可见-->
<!--                visible:false,-->
<!--              //老师详细信息-->
<!--              teacherRecord: {-->
<!--                teacherId: '',-->
<!--                account: '', //工号-->
<!--                name: '', //老师姓名-->
<!--                password: '', //老师密码-->
<!--                college: '',//学院-->
<!--                e_mail: '',//邮箱-->
<!--                phone: ''//电话-->
<!--              },-->
<!--              //课程组详细信息-->
<!--              courseGroupDetailInfo:{-->
<!--                simpleCourseGroupInfo:{-->
<!--                  courseGroupId:'',-->
<!--                  courseGroupTime:'',-->
<!--                  course:'',-->
<!--                  teachers:[],-->
<!--                  classes:[]-->
<!--                },-->
<!--                courseGroupName:'',-->
<!--                courseGroupLeader:''-->
<!--              },-->

<!--            }-->
<!--        },-->
<!--        computed: {-->
<!--            // 提取store文件夹auditRegister.js中的state,赋值给计算属性 auditJoinState-->
<!--            //提取store文件夹access.js中的state,赋值给计算属性 accessState-->
<!--            ...mapState({-->
<!--                auditJoinState: 'auditJoin',-->
<!--                accessState: 'access'-->
<!--            }),-->

<!--            //是否选中多项-->
<!--            hasSelected(){-->
<!--                return this.selectedRowKeys.length>0;-->
<!--            },-->

<!--            //选中多项时的数据源和事件监听-->
<!--            rowSelection(){-->
<!--                return {-->
<!--                    selectedRowKeys: this.selectedRowKeys,-->
<!--                    onChange: selectedRowKeys=>{-->
<!--                        this.selectedRowKeys = selectedRowKeys;-->
<!--                    },-->
<!--                    //所有已通过和已驳回的项都禁止选中-->
<!--                    getCheckboxProps: record => ({-->
<!--                        props: {-->
<!--                            disabled: !record.result.startsWith('未审核'),-->
<!--                        },-->
<!--                    }),-->
<!--                }-->
<!--            }-->
<!--        },-->
<!--        mounted() {-->
<!--            //页面刚加载时调用一次接口-->
<!--            this.$store.dispatch('auditJoin/auditJoinGet',{-->
<!--                //toekn 和 colllegeId 从 accessState中获取-->
<!--                token: this.accessState.token,-->
<!--                collegeId: this.accessState.collegeId,-->
<!--                rows: this.defaultRows,-->
<!--                currentPage: this.defaultCurrentPage-->
<!--            }).then( (res) => {-->
<!--                console.log(res)-->
<!--                //调用成功，结果返回-->
<!--                this.dataResource=this.auditJoinState.auditJoinInfo;-->
<!--                this.pagination.total=this.auditJoinState.total;-->
<!--            }).catch((err) => {-->
<!--                this.$message.error(err.msg);-->
<!--            })-->
<!--        },-->
<!--        methods: {-->
<!--            //查看某项审核信息的事件监听处理-->
<!--            onCheck(teacherId,courseGroupId){-->
<!--                //调用接口-->
<!--                this.$store.dispatch('auditJoin/getTeacherInfoAndCourseGroupInfo',{-->
<!--                    token: this.accessState.token,-->
<!--                    teacherId: teacherId,-->
<!--                    courseGroupId: courseGroupId,-->
<!--                }).then(() => {-->
<!--                    //获取成功-->
<!--                    this.visible=true;-->
<!--                    this.teacherRecord=this.auditJoinState.teacherInfo;-->
<!--                    this.courseGroupDetailInfo=this.auditJoinState.courseGroupInfo-->
<!--                }).catch((err) => {-->
<!--                    this.$message.error(err.msg);-->
<!--                })-->

<!--            },-->
<!--            //通过和驳回的颜色样式，根据是否未审核而定-->
<!--            onColor(record,operation){-->
<!--                //如果是已通过或者已驳回，则为灰色-->
<!--                if(!record.result.startsWith('未审核')){-->
<!--                    return {-->
<!--                        color: 'grey'-->
<!--                    }-->
<!--                }else {-->
<!--                    //如果是为审核且是驳回按钮，则为红色-->
<!--                    //如果是为审核且是通过按钮，则默认为蓝色-->
<!--                    if(operation.startsWith('驳回')){-->
<!--                        return {-->
<!--                            color: 'red'-->
<!--                        }-->
<!--                    }-->
<!--                }-->
<!--            },-->
<!--            //点击通过和驳回是否弹出确认框，根据是否未审核而定-->
<!--            onDisabled(record){-->
<!--                return !record.result.startsWith('未审核');-->
<!--            },-->
<!--            //通过或驳回某一项审核-->
<!--            onOperation(auditJoinId,operation){-->
<!--                //调用接口-->
<!--                this.$store.dispatch('auditJoin/auditJoinOperate',{-->
<!--                    token: this.accessState.token,-->
<!--                    result: operation,-->
<!--                    auditJoinId: auditJoinId-->
<!--                }).then( () => {-->
<!--                    //返回成功-->
<!--                    this.$message.success("操作成功");-->
<!--                    //console.log("通过操作成功");-->
<!--                    this.selectedRowKeys=this.selectedRowKeys.filter((items)=>items!==auditJoinId);-->
<!--                    this.onChangePage(this.pagination.current,this.pagination.pageSize);-->
<!--                }).catch((err) => {-->
<!--                    this.$message.error(err.msg)-->
<!--                })-->
<!--            },-->
<!--            //分页发生改变时，调用该事件-->
<!--            onChangePage(page,pageSize){-->
<!--                //修改分页数据-->
<!--                this.pagination.current=page;-->
<!--                this.pagination.pageSize=pageSize;-->
<!--                //调用接口-->
<!--                this.$store.dispatch('auditJoin/auditJoinGet',{-->
<!--                    token: this.accessState.token,-->
<!--                    collegeId: this.accessState.collegeId,-->
<!--                    rows: pageSize,-->
<!--                    currentPage: page-->
<!--                }).then((res) => {-->
<!--                    console.log(res)-->
<!--                    //返回成功-->
<!--                    this.dataResource=this.auditJoinState.auditJoinInfo;-->
<!--                    this.pagination.total=this.auditJoinState.total;-->
<!--                }).catch((err) => {-->
<!--                    this.$message.error(err.msg)-->
<!--                })-->
<!--            },-->
<!--            //批量操作时调用该事件-->
<!--            onBatchOperation(operation){-->
<!--                //调用接口-->
<!--                this.$store.dispatch('auditJoin/auditJoinBatchOperate',{-->
<!--                    token: this.accessState.token,-->
<!--                    result: operation,-->
<!--                    auditJoinId: this.selectedRowKeys-->
<!--                }).then( () => {-->
<!--                    //返回成功-->
<!--                    this.$message.success("批量操作成功");-->
<!--                    //console.log("通过操作成功");-->
<!--                    this.selectedRowKeys=[];-->
<!--                    this.onChangePage(this.pagination.current,this.pagination.pageSize);-->
<!--                }).catch((err) => {-->
<!--                    this.$message.error(err.msg)-->
<!--                    this.selectedRowKeys=[];-->
<!--                })-->
<!--            },-->

<!--            //弹出的对话框的确定取消按钮点击时，调用该事件-->
<!--            handleOk(){-->
<!--                this.visible=false;-->
<!--            },-->
<!--            handleCancel(){-->
<!--                this.visible=false;-->
<!--            }-->
<!--        }-->
<!--    }-->
<!--</script>-->

<!--<style scoped>-->
<!--    .query-container{-->
<!--        display: flex;-->
<!--        margin: 1em;-->
<!--    }-->
<!--    .seize{-->
<!--        margin-left: 1em;-->
<!--    }-->

<!--    .modal-container{-->
<!--        width: 100%;-->
<!--        height: 20em;-->
<!--        overflow-y: scroll;-->
<!--        overflow-x: hidden;-->

<!--    }-->

<!--</style>-->


